<!--  -->
<template>
    <div class="leftTopModule">
      <header class="head">
          <titleModule :title="state.titleName"></titleModule>
      </header>
      <section class="main" id="leftFooterMain"></section>
    </div>
  </template>
  
  <script setup>
  import { onMounted, reactive } from 'vue'
  import titleModule from '../../components/title/index.vue'
  import { Column } from '@antv/g2plot';
  const state = reactive({
      titleName:'各区GDP'
  })
  const createWordCloud = () =>{
    //1.创建数据源
    const data = [
        {
            type: '家具家电',
            sales: 38,
        },
        {
            type: '粮油副食',
            sales: 52,
        },
        {
            type: '生鲜水果',
            sales: 61,
        },
        {
            type: '美容洗护',
            sales: 145,
        },
        {
            type: '母婴用品',
            sales: 48,
        },
        {
            type: '进口食品',
            sales: 38,
        },
    ];
    //2.创建Column对象
    const Word = new Column('leftFooterMain',{
        title: {
            visible: true,
            text: '基础柱状图',
        },
        forceFit: true,
        data,
        padding: 'auto',
        data,
        xField: 'type',
        yField: 'sales',
        color:["blue","yellow","green"],
        meta: {
            type: {
            alias: '类别',
            },
            sales: {
            alias: '销售额(万)',
            },
        },
    })
    //3.渲染器
    Word.render();
  }
  onMounted(()=>{
    createWordCloud()
  })
  </script>
  <style  scoped>
  .leftTopModule{
      width: 100%;
      height: 100%;
  }
  .head{
      width: 100%;
      height: 15%;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .main{
    width: 100%;
    height: 85%;
  }
  </style>